import * as React from 'react';
import {Image,Text,View} from 'react-native'
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import Home from './home';
import Service from './service';
import Mine from './mine';
import Images from '../images/images';
import screen from '../utils/screen';
import SatList from './track';

const Tab = createBottomTabNavigator();
const MainTab = ()=>{
    return (
        <Tab.Navigator
            screenOptions={({route})=>({
                headerTransparent:true,
                headerTitleAlign:'left',
                tabBarIcon:({focused,color,size})=>{
                    let iconName;
                    if(route.name === 'Home'){
                        iconName = focused ? Images.device_tab_sel : Images.device_tab
                    }
                    if(route.name === 'Track'){
                        iconName = focused ? Images.track_tab_sel : Images.track_tab
                    }
                    if(route.name === 'Service'){
                        iconName = focused ? Images.service_tab_sel : Images.service_tab
                    }
                    if(route.name === 'Mine'){
                        iconName = focused ? Images.mine_tab_sel : Images.mine_tab
                    }

                    return <Image source={iconName} style={{width:screen.PIXEL_40,height:screen.PIXEL_40}}/>
                },
                tabBarActiveTintColor:'#909EA9',
                tabBarInactiveTintColor:'#909EA9',
                // tabBarActiveBackgroundColor:'#333',
                // tabBarInactiveBackgroundColor:'#999',
                tabBarStyle:{backgroundColor:'#fff',borderTopLeftRadius:20,borderTopRightRadius:20,borderTopWidth:0},
            })}
        >
            <Tab.Screen name="Home" component={Home} options={{title:'设备'}}/>
            <Tab.Screen name="Track" component={SatList} options={{title:'卫星追踪'}} />
            {/*<Tab.Screen name="Service" component={Service} options={{title:'服务'}} />*/}
            <Tab.Screen name="Mine" component={Mine} options={{title:'我的',headerTitle:''}}/>
        </Tab.Navigator>
    );
}

export default MainTab
